<template>
    <van-loading color="#F53137" v-if="loading" />
    <div id="buyvip" v-else>
        <div class="vip-img">
            <img :src="imgUrl" alt="" />
        </div>
        <div
            v-if="!isVip"
            class="bottom-btn fs-14 fw-400 dis-flex flex-x-between flex-y-center"
        >
            <div class="price">
                <span class="fw-600 fs-12">￥</span>
                <span class="fw-600 fs-24">{{
                    $utils.func.transformNumber(equityAmount, "whole")
                }}</span>
                <!-- <span>已优惠￥0.5</span> -->
            </div>
            <div class="btn" @click="goBuy">
                <img src="../../../assets/img/lingqu.svg" alt="" />
            </div>
        </div>
        <div v-if="!isVip" class="view"></div>
    </div>
</template>

<script>
    import { Toast } from "vant"
    import router from '@/router'
    export default {
        props: [], // 父辈向子辈传参
        name: 'buyvip',
        components: { // 组件的引用

        },
        data() {
            return {
                imgUrl: '',
                equityAmount: 0,
                isVip: true,
                loading: true
            }
        },
        methods: {
            goBuy() {
                Toast.loading({
                    message: '拉起支付中',
                    forbidClick: true,
                })

                let data = this.$store.state.app.defaultEquipment
                console.log("默认设备信息", data);
                let _this = this
                if (data.id) {
                    this.$api.app.payVip({
                        productId: data.productId,
                        machineCoding: data.machineCoding
                    }).then((res) => {
                        let _data = res.data
                        console.log("立即升级", res);
                        let params = {
                            appId: _data.appId, //公众号名称，由商户传入
                            timeStamp: _data.timeStamp, //时间戳，自1970年以来的秒数
                            nonceStr: _data.nonceStr, //随机串
                            package: _data.packageVal,
                            signType: _data.signType, //微信签名方式：
                            paySign: _data.paySign //微信签名
                        }
                        console.log("参数", params);
                        Toast.clear()
                        // 检测支付环境中的 WeixinJSBridge
                        if (typeof WeixinJSBridge == "undefined") {
                            if (document.addEventListener) {
                                //android机型，调取支付支付环境偶尔有延迟，这里增加延时器处理
                                var timev = setTimeout(() => {
                                    clearTimeout(timev)
                                    document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(params),
                                        false);
                                }, 1000)
                            } else if (document.attachEvent) {
                                document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(params));
                                document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(params));
                            }
                        } else {
                            this.onBridgeReady(params);
                        }
                    }).catch((err) => {
                        Toast(err.message)
                        console.log("err", err);
                    });
                } else {
                    Toast('未绑定产品')
                    this.$router.push("/bind")
                }
            },
            onBridgeReady(params) {
                const _this = this
                if (WeixinJSBridge && params.appId) {
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', params,
                        function (res) {
                            console.log("支付结果", res);
                            if (res.err_msg == 'get_brand_wcpay_request:ok') {
                                Toast.success('支付成功')
                                _this.getEquipmentInfo(1)
                                //支付成功回调
                                // _this.$router.push('/payRes')
                            } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                                //支付失败回调
                                Toast('取消支付')
                            }
                        }
                    )
                }
            },
            getEquipmentInfo(type) {
                let data = this.$store.state.app.defaultEquipment
                console.log("首页获取设备信息", data);
                if (type == 0) {
                    this.isVip = data.equityState == 1 ? true : false
                } else {
                    this.$api.app.getEquipmentApi().then((res) => {
                        if (res.data) {
                            this.isVip = res.data.equityState == 1 ? true : false
                            this.$store.commit('setDefaultEquipment', res.data)
                        } else {
                            Toast('请绑定默认设备')
                            this.$router.push('/bind')
                        }
                    }).catch((err) => {
                        Toast(err.message)
                    });
                }
            },
            getEquipmentImg() {
                let data = this.$store.state.app.defaultEquipment
                this.$api.app.getEquityIntroduceApi({
                    productId: data.productId,
                    machinePrimaryId: data.id
                }).then((res) => {
                    // console.log("res", res);
                    this.imgUrl = res.data.equityBackgroundImage
                    this.equityAmount = res.data.equityAmount
                    this.loading = false
                }).catch((err) => {
                    Toast(err.message)
                    setTimeout(() => {
                        this.$router.back(-1)
                    }, 1000)
                });
            }
        },
        computed: {},
        watch: {},
        created() {
            this.getEquipmentInfo(0)
            this.getEquipmentImg()
        },
        mounted() { },
    }
</script>
    
<style scoped lang='scss'>
    .van-loading {
        position: relative;
        color: #c8c9cc;
        font-size: 0;
        vertical-align: middle;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    #buyvip {
        height: 100vh;
        background-color: #f2f3f7;
        position: relative;
        font-family: "D-DIN";
        .vip-img {
            font-size: 0;
            // padding-bottom: 58px;
            background-color: #f2f3f7;

            & > img {
                width: 100vw;
            }
        }
        .bottom-btn {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            padding: 12px 13px 12px 19px;
            background-color: #fff;
            color: #ff3232;
            .price {
                line-height: 12px;
                & > span:nth-child(3) {
                    line-height: 16px;
                    margin-left: 5px;
                }
            }
            .btn {
                font-size: 0;
                & > img {
                    width: 146px;
                    height: 42px;
                }
            }
        }

        .view {
            width: 100%;
            height: 100px;
        }
    }
</style>